<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.rolling.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script>
$(function() {
	eval($('#code').text());
});	

function reverse(rollingDivId) {
	$("#" + rollingDivId).reverseRolling();
}

var startMouseEventTime = 0
var endMouseEventTime = 0
var startMouseEvnetX = -1;
var endMouseEventX = -1;

function normal() {
	var rollingDiv = $("#rollingDiv");
	var rollingAnimationFrame = rollingDiv.getRollingAnimationFrame();
	if (rollingAnimationFrame < 100) {
		rollingAnimationFrame += 10;
	} else {
		rollingAnimationFrame = 100;
	}
	$("#commentDiv").text("rollingAnimationFrame: " + rollingAnimationFrame);
	rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
	setTimeout('normal()', 1000);	
}	

</script>
<body>
<h2>Mouse Event4</h2>
Mouse is over both edge of banner, rolling starts. Mouse out both edge, rolling stop.
<hr>
<div id="rollingDiv"></div>
<div id="commentDiv"></div>
<hr>
<h2>Script</h2>
<xmp id='code'>
	var rollingDiv = $("#rollingDiv");	
	rollingDiv.rolling("right", 130, 100, 6);
	
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ayjjsallNwc' target='_new'><img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg' width='130' height='100' alt='1 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=pe-MIDDfckw' target='_new'><img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg' width='130' height='100' alt='2 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=AyRIvX25vRQ' target='_new'><img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg' width='130' height='100' alt='3 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=GxplDa3M5Io' target='_new'><img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg' width='130' height='100' alt='4 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=v6MKOY9x_ds' target='_new'><img src='http://i.ytimg.com/vi/v6MKOY9x_ds/default.jpg' width='130' height='100' alt='5 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ZBDD7aLd6lc' target='_new'><img src='http://i.ytimg.com/vi/ZBDD7aLd6lc/default.jpg' width='130' height='100' alt='6 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=et-dNoTi8IY' target='_new'><img src='http://i.ytimg.com/vi/et-dNoTi8IY/default.jpg' width='130' height='100' alt='7 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=mX1xyxWkmw0' target='_new'><img src='http://i.ytimg.com/vi/mX1xyxWkmw0/default.jpg' width='130' height='100' alt='8 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=fRWov2pdJkE' target='_new'><img src='http://i.ytimg.com/vi/fRWov2pdJkE/default.jpg' width='130' height='100' alt='9 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=QCmP4bEJfOg' target='_new'><img src='http://i.ytimg.com/vi/QCmP4bEJfOg/default.jpg' width='130' height='100' alt='10 item' border='0'/></a>")
   
	
	rollingDiv.mouseout(function(e) {
		rollingDiv.stopRolling();
	});
   rollingDiv.startRolling(10, 0, 50);	   
   rollingDiv.stopRolling();
   
   var leftArrowDiv = $("<div><table width='100%' height='100%'><tr><td valign='center' align='center'><img src='http://songsungkyun.cafe24.com/interpark/left.jpg'></td></tr></table></div>").appendTo($("body"));
		leftArrowDiv.css("position", "absolute");
		//leftArrowDiv.css("background-color", "yellow");
		leftArrowDiv.css("left", rollingDiv.offset().left);
		leftArrowDiv.css("top", rollingDiv.offset().top);
		leftArrowDiv.css("width", 20);
		leftArrowDiv.css("height", rollingDiv.height());
		leftArrowDiv.css("z-index", 100);
		leftArrowDiv.css("opacity", 0.5);
		leftArrowDiv.hover(function() {
			leftArrowDiv.animate({ 
				opacity: 0.9
			}, 1000);
			if (rollingDiv.getRollingDirection() == "left") {
				rollingDiv.reverseRolling();
			}
			rollingDiv.resumeRolling();
		}, function() {
			rollingDiv.stopRolling();
			leftArrowDiv.animate({ 
				opacity: 0.5
			}, 1000);
		});
		
		 var rightArrowDiv = $("<div><table width='100%' height='100%'><tr><td valign='center' align='center'><img src='http://songsungkyun.cafe24.com/interpark/right.jpg'></td></tr></table></div>").appendTo($("body"));
		rightArrowDiv.css("position", "absolute");
		rightArrowDiv.css("left", rollingDiv.offset().left + rollingDiv.width() - 20);
		rightArrowDiv.css("top", rollingDiv.offset().top);
		rightArrowDiv.css("width", 20);
		rightArrowDiv.css("height", rollingDiv.height());
		rightArrowDiv.css("z-index", 100);
		rightArrowDiv.css("opacity", 0.5);
		rightArrowDiv.hover(function() {
				rightArrowDiv.animate({ 
					opacity: 0.9
				}, 1000);
				if (rollingDiv.getRollingDirection() == "right") {
					rollingDiv.reverseRolling();
				}
				rollingDiv.resumeRolling();
			}, function() {
				rollingDiv.stopRolling();
				rightArrowDiv.animate({ 
					opacity: 0.5
				}, 1000);
		});
</xmp>
</body>